<template>
  <el-dialog v-model="dialogVisible" title="编辑国际化" @close="handleClose" width="600px">
    <el-form ref="formRef" :model="form" label-width="120px">
      <el-form-item label="编码" prop="code" >
        <el-input v-model="form.code" placeholder="请输入编码" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="form.remarks" placeholder="请输入备注（可选）" />
      </el-form-item>
      
      <el-form-item label="语言文本">
        <div v-for="(lang, index) in form.languageTexts" :key="index" class="language-item">
          <el-select 
            v-model="lang.languageTag" 
            placeholder="选择语言标签" 
            class="language-select"
          >
            <el-option label="中文" value="zh-CN"></el-option>
            <el-option label="英文" value="en-US"></el-option>
          </el-select>
          <el-input 
            v-model="lang.message" 
            placeholder="请输入消息内容" 
            class="language-input"
          />
          <el-button 
            type="text" 
            icon="Delete" 
            @click="removeLanguage(index)" 
            v-if="form.languageTexts.length > 1"
          ></el-button>
        </div>
        <el-button type="text" @click="addLanguage">+ 添加语言</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineEmits, defineExpose } from 'vue';
import { updateI18n } from '@/Api/i18n';
import { ElMessage } from 'element-plus';

const form = reactive({
  id: '',
  code: '',
  remarks: '',
  languageTexts: [
    { languageTag: 'zh-CN', message: '' },
    { languageTag: 'en-US', message: '' }
  ]
});

const emit = defineEmits(['save-success', 'close']);
const dialogVisible = ref(false);
const formRef = ref();

// 接收父组件传递的编辑数据
const setEditItem = (item) => {
  form.id = item.id;
  form.code = item.code || '';
  form.remarks = item.remarks || '';
  form.languageTexts = item.languageTexts && item.languageTexts.length 
    ? [...item.languageTexts] 
    : [
        { languageTag: 'zh-CN', message: '' },
        { languageTag: 'en-US', message: '' }
      ];
  dialogVisible.value = true;
};

// 添加语言条目
const addLanguage = () => {
  form.languageTexts.push({ languageTag: '', message: '' });
};

// 移除语言条目
const removeLanguage = (index) => {
  form.languageTexts.splice(index, 1);
};

// 保存编辑内容
const handleSave = async () => {
  try {
    const response = await updateI18n(form.id, {
      code: form.code,
      remarks: form.remarks,
      languageTexts: form.languageTexts
    });

    if (response?.data?.code === 200 || response?.code === 200) {
      ElMessage.success('更新成功');
      dialogVisible.value = false;
      emit('save-success');
    } else {
      const errorMsg = response?.data?.message || '更新失败';
      ElMessage.error(errorMsg);
    }
  dialogVisible.value = false;

  } catch (error) {
    if (error.response && error.response.status === 404) {
      console.error('编辑接口不存在：', error.config.url);
      ElMessage.error('编辑接口未找到，请联系后端开发人员');
    } else {
      console.error('编辑保存失败：', error);
      ElMessage.error('保存失败，请重试');
    }
  }
};

// 处理关闭事件
const handleClose = () => {
  emit('close');
  dialogVisible.value = false;
  formRef.value?.resetFields();
};

defineExpose({ setEditItem });
</script>

<style scoped>
.language-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.language-select {
  width: 120px;
}

.language-input {
  flex: 1;
}
</style>